<template>
  <div class="guess-like">
    <div class="guess-title">
      <img class="mp-title-img" style="width: 0.3rem; height: 0.3rem;margin-left: 0.2rem;vertical-align: top;" src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="猜你喜欢">
      <span>猜你喜欢</span>
    </div>
    <ul>
      <li v-for="item of GuessloveList" :key="item.id" class="border-bottom">
        <router-link :to="'/detail/'+ item.id" tag="div"  class="hot-list-tag" style="float: left;">
          <img class="mp-like-img" style="position: relative;width: 2rem;height: 2rem;" :src="item.imgUrl" :alt="item.title">
          <div class="mp-like-imgs" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)">{{item.imgword}}</div>
        </router-link>
        <div class="guess-intro">
           <div class="intro-title">{{ item.title }}</div>
           <div class="intro-comment"><span class="iconfont">&#xe846;&#xe846;&#xe846;&#xe846;&#xe846;&nbsp;&nbsp;</span>{{item.ping}}</div>
           <div class="intro-price">
           <div class="intro-left">
           <em>&yen;{{ item.price }}</em>
           <span>起</span><br />
           </div>
           <div class="intro-address">{{ item.address }}</div>
           </div>
           <div class="wo" >
           <em  style="font-size: 0.16rem; color: red; margin-top: 0.6rem; padding-left: 0.2rem;">{{item.word}}</em>
           </div>
        </div>
      </li>
    </ul>
  <a class="mp-like-more mp-border-top" href="//touch.piao.qunar.com/touch/list_北京_景点门票.html">查看所有产品</a>
  </div>
</template>

<script>
export default {
  name: 'HomeGuesslove',
  props: {
    GuessloveList: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .guess-title
    padding 12px 0
    span
      font-size 0.32rem
  ul
    li
      width 7.76rem
      height 3rem
      padding 0.2rem 0
      margin-left 0.24rem
  .guess-intro
    float left
    width 5.76rem
    height 3rem
    padding-left 0.22rem
    .intro-title
      margin-top 0.26rem
      height .44rem
      color #212121
      font-size 0.32rem
      line-height 0.44rem
    .intro-comment
      margin 0.2rem 0
      height 0.34rem
      span
        color #ff8300
        font-size 0.28rem
     .intro-price
       color #616161
       font-size 0.24rem
       line-height 0.4rem
       overflow hidden
       em
         font-size 0.4rem
         color #ff8300
     .intro-address
       float right
     .intro-left
       float left
     .wo
       margin-top 0.3rem
     .border-bottom
       .hot-list-tag
         width 2rem
         height 2rem
         .mp-like-img
           width 100%
 .mp-like-imgs
   position absolute
   top 0.2rem
   left 0
   width 1.02rem
   height 0.38rem
   background-size 100%
   color #fff
   font-size 0.2rem
   line-height 0.38rem
   text-indent 0.04rem
 .mp-like-more
   display: block;
   padding: .2rem 0;
   color: #00afc7;
   font-size: .28rem;
   line-height: .4rem;
   text-align: center;
</style>
